/// 页面 * 表单
<template>
  <Page>
    <ExForm ref="formRef" :model="model" label-type="placeholder">
      <ExFormItem label="用户名" name="username" :rule="rule().len(10)">
        <AInput :maxlength="15" />
      </ExFormItem>
      <ExFormItem label="年龄" name="age" :rule="rule().required(false).limit(99, 999_99)">
        <AInputNumber :max="9999_9999" />
      </ExFormItem>

      <ExFormItem
        label="状态"
        name="status,statusName"
        :rules="[{ required: true, message: '请选择状态' }]"
      >
        <ASelect
          :options="[
            {
              value: 1,
              label: '启用',
            },
            { value: 2, label: '禁用' },
          ]"
          @change="
            (value) => {
              console.log(value)
            }
          "
        />
      </ExFormItem>

      <ExFormItem label="备注" name="remarks">
        <ATextarea show-count :maxlength="100" />
      </ExFormItem>
    </ExForm>
    {{ model }}
    <br />
    <button
      @click="
        async () => {
          try {
            await formRef?.api?.validateFields()
          } catch (err) {
            console.log(err)
          }
        }
      "
    >
      validate
    </button>
  </Page>
</template>

<script setup lang="tsx">
import { rule } from '@expresso/plus'

const model = shallowReactive({
  username: 'Darwin',
  password: '123456',
  age: 35,
  status: 1,
  remarks: '备注一下先',
})

const formRef = ref<VueComponentInstance<typeof ExForm>>()
</script>

<style scoped></style>
